<template>
  <div class="dashboard-container">
    <div class="app-container">
      <Headline title-name="组织架构" />
      <el-card class="tree-card">
        <!-- 用了一个行列布局  is-root:限制操作权限-->
        <TreeTool :data="company" :is-root="true" @addDialog="addDialog" />
        <hr>
        <!--放置一个属性   这里的props和我们之前学习的父传子 的props没关系-->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- 使用插槽  渲染数据 -->
          <TreeTool
            slot-scope="{ data }"
            :data="data"
            @addDialog="addDialog"
            @editDialog="editDialog"
            @updateData="loadData"
          />
        </el-tree>
      </el-card>
      <AddDepartment ref="depDialog" :is-show-dialog.sync="isShowDialog" :data="nodeData" @updateData="loadData" />
    </div>
  </div>
</template>

<script>
import TreeTool from './components/tree-tool.vue'
import { getDepartments } from '@/api/departments'
import { departmentsTreeData } from '@/utils/index'
import AddDepartment from './components/add-department'

export default {
  components: {
    TreeTool,
    AddDepartment
  },
  data() {
    return {
      isShowDialog: false,
      nodeData: {},
      departs: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      company: { name: 'xxxxxxxxx份有限公司', manager: '负责人', id: '' }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      getDepartments().then((res) => {
        this.departs = departmentsTreeData(res.depts, '')
      })
    },
    addDialog(data) {
      this.isShowDialog = true
      // 将被点击的部门的数据存起来备用
      this.nodeData = data
    },
    editDialog(data) {
      this.isShowDialog = true
      // 将被点击的部门的数据存起来备用
      this.nodeData = data
      this.$nextTick(() => {
        this.$refs.depDialog.getDepartmentsDetails()
      })
    }
  }
}
</script>

<style  scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
